<script setup>
import {reactive, ref} from "vue";
import request from "@/assets/js/mobileRequest";
import {closeToast, showLoadingToast, showSuccessToast} from "vant";
import router from "@/router";
import loginUser from "../App.vue";
import qs from "qs";
import {currentUser} from "@/App.vue";

const loginInfo = ref({
  username:'',
  password:''
})

const registerInfo = ref({
  username:'',
  password:'',
  repeatPassword:''
})

const passwordValidator = () => {
  if (registerInfo.value.repeatPassword.trim() === '') return false;
  if (registerInfo.value.password !== registerInfo.value.repeatPassword) return "两次输入不一致";
  return true;
}

const activeTab = ref()

const loginHandle = () => {
  let data = qs.stringify(loginInfo.value);//qs未安装
  console.log(data)
  showLoadingToast('请稍后')
  request.post(BASE_URL+'/v1/user/login',data).then((response)=>{
    if(response.data.code===2000){
      closeToast();
      showSuccessToast('登录成功!即将跳转...');
      console.log(response);
      currentUser.value = response.data.data;
      //initWebSocket(loginUser.value.username);
      setTimeout(function () {
        router.push('/');
      },1500);
    }
  })
}

const registerHandle = () => {
  console.log(registerInfo.value)
  let data = qs.stringify(registerInfo.value);//qs未安装
  console.log(data);
  request.post(BASE_URL+'/v1/user/reg',data).then((response)=>{
    if(response.data.code===2000){
      showSuccessToast('注册成功!');
      registerInfo.value = {};
      activeTab.value = 'login'
    }
  })
}

const themeVars = reactive({
  rateIconFullColor: '#07c160',
  sliderBarHeight: '4px',
  sliderButtonWidth: '20px',
  sliderButtonHeight: '20px',
  tabsBottomBarColor: '#07c160',
  buttonPrimaryBackground: '#07c160',
  buttonPrimaryBorderColor: '#07c160',
});
</script>

<template>
  <van-config-provider :theme-vars="themeVars">
    <div style="position: absolute;left: 50%;top:50%;transform: translate(-50%,-50%);width: 80%;">
      <van-tabs v-model:active="activeTab">
        <van-tab title="登录" name="login">
          <van-form @submit="loginHandle">
            <van-cell-group inset>
              <van-field
                  v-model="loginInfo.username"
                  name="用户名"
                  label="用户名"
                  placeholder="用户名"
                  :rules="[{ required: true, message: '请填写用户名' }]"
              />
              <van-field
                  v-model="loginInfo.password"
                  type="password"
                  name="密码"
                  label="密码"
                  placeholder="密码"
                  :rules="[{ required: true, message: '请填写密码' }]"
              />
            </van-cell-group>
            <div style="margin: 16px;">
              <van-button round block type="primary" native-type="submit">
                提交
              </van-button>
            </div>
          </van-form>
        </van-tab>
        <van-tab title="注册" name="register">
          <van-form @submit="registerHandle">
            <van-cell-group inset>
              <van-field
                  v-model="registerInfo.username"
                  name="用户名"
                  label="用户名"
                  placeholder="用户名"
                  :rules="[{ required: true, message: '请填写用户名' }]"
              />
              <van-field
                  v-model="registerInfo.password"
                  type="password"
                  name="密码"
                  label="密码"
                  placeholder="密码"
                  :rules="[{ required: true, message: '请填写密码' }]"
              />
              <van-field
                  v-model="registerInfo.repeatPassword"
                  type="password"
                  name="重复密码"
                  label="重复密码"
                  placeholder="重复密码"
                  :rules="[{ validator:passwordValidator, required: true ,message:'请再次输入密码'}]"
              />
            </van-cell-group>
            <div style="margin: 16px;">
              <van-button round block type="primary" native-type="submit">
                提交
              </van-button>
            </div>
          </van-form>
        </van-tab>
      </van-tabs>
    </div>
  </van-config-provider>

</template>

<style scoped>


</style>